<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Display a map on a webpage</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- Load Leaflet from CDN -->
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
	    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	    crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
	    integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
	    crossorigin=""></script>		
		
		
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
		<!-- https://v4.bootcss.com/docs/examples/pricing/ -->
		
		<link rel="stylesheet" href="css/mapstyle.css"/>
		<script src="js/Geojsontest.js"></script>
	</head>
	<body onload="init()">
		
		<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
		  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
		  <nav class="my-2 my-md-0 mr-md-3">
		    <a class="p-2 text-dark" href="#">Features</a>
		    <a class="p-2 text-dark" href="#">Enterprise</a>
		    <a class="p-2 text-dark" href="#">Support</a>
		    <a class="p-2 text-dark" href="#">Pricing</a>
		  </nav>
		  <a class="btn btn-outline-default" href="#">Sign in</a>
		  <a class="btn btn-outline-default" href="#">Sign up</a>
		</div>
		
	    <div >
			<article id="map"></article>
		</div>
		
	</body>
</html>